<template>
  <div class="container_box">
    <Breadcrumb :items="['审计日志']" />
    <div class="process_index">
      <div class="process_bar" :style="{ height: precent }" />
    </div>
  </div>
</template>

<script setup>
  import { onMounted, computed,ref } from 'vue';

  const props = defineProps({
    total: {
      type: Number,
      default: 100,
    },
    used: {
      type: Number,
      default: 0,
    },
  });
  const precent = computed(() => {
    return `${(props.used / props.total) * 100  }%`;
  });

  onMounted(() => {
  // setInterval(() => {
  //   num.value += 10
  // }, 3000);
  });
</script>

<style scoped lang="less">

  .process_index {
    height: 200px;
    width: 40px;
    border: 1px solid #000;
    position: relative;
    .process_bar {
      background: #f99;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: all 1s ease
    }
  }
</style>
